<!-- demo3 -->
<template>
  <div class="chart-box" :style="styObj">
    <div class="process-box">
      <div class="center-mask"></div>
    </div>
    <!-- 插槽内容 -->
    <div class="slot-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  rate: {
    type: Number,
    default: 0,
  },
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const defaultConfig = ref({
  borderWidth: "8px", // 描边宽度
  borderBackground: "#eee", // 描边背景颜色
  startColor: "#d5f4ee", // 进度条起始颜色
  endColor: "#2ec4a7", // 进度条结束颜色
  centerCircleBg: "transparent", // 中间空心圆背景
  clockwise: true, // 是否顺时针
  gapNum: 10, // 分割段数
  lineWidth: 2, // 间隔线宽度，百分比
});
const styObj = computed(() => {
  let rate = props.rate;
  if (rate <= 0) {
    rate = 0;
  } else if (rate >= 1) {
    rate = 1;
  } else {
    rate = rate;
  }
  let endPos = `${rate * 100}%`;
  let obj = Object.assign({}, defaultConfig.value, props.config);
  let rotate = `rotate(${360 * rate}deg)`;
  let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)";
  let bgInfo = [];
  let gap = 100 / obj.gapNum;
  for (let i = 0; i < obj.gapNum; i++) {
    bgInfo.push(`#fff ${i * gap}%`);
    bgInfo.push(`rgba(4, 19, 39, 1) ${i * gap + obj.lineWidth}%`);
    bgInfo.push(`transparent ${i * gap + obj.lineWidth}%`);
    bgInfo.push(`transparent ${(i + 1) * gap}%`);
  }
  return {
    "--background-image": `conic-gradient(${bgInfo.join(",")})`,
    "--background-image1": `conic-gradient(${obj.startColor} 00%, ${obj.endColor} ${endPos}, transparent ${endPos})`,
    "--border-width": obj.borderWidth,
    "--background-color": obj.borderBackground,
    "--center-gap-bg": obj.centerCircleBg,
    "--clockwise-wise": chartRotate,
  };
});
</script>
<style scoped>
.chart-box {
  position: relative;
  width: 100%;
  height: 100%;
}
.process-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: var(--border-width);
  box-sizing: border-box;
  background-color: var(--background-color);
  background-image: var(--background-image), var(--background-image1);
  transform: var(--clockwise-wise);
}
.center-mask {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--center-gap-bg);
}
/* 插槽内容样式 */
.slot-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
